<template>
  <div ref="main" style="background-color: #fff"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { chartDataFour } from "../../axios/http";
const main = ref();
const data = ref({
  day: [],
  num: { 一般用户: [], 月租用户: [], 特殊车辆: [] },
});
onMounted(async () => {
  // 请求数据
  const arr = await chartDataFour();
  console.log(arr.data);
  data.value = arr.data;
  // 图表
  init();
});
// 处理数据

function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: data.value.day,
    },
    series: [
      {
        name: "一般用户",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data.value.num.一般用户,
      },
      {
        name: "月租用户",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data.value.num.月租用户,
      },
      {
        name: "特殊车辆",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data.value.num.特殊车辆,
      },
    ],
  };

  myChart.setOption(option);
}
</script>
<style scoped lang="less"></style>
